var imgWidth;
var silderIndex=1;
$(function () {
       
    //点击小圆点时
    $(".banner_y .nav_right .dian li").mouseenter(function(){
        //此时  图片有6张  而圆点只有4个 +1
        silderIndex=$(this).index()+1;
        changeImg();
    });

    //点击箭头时
    imgWidth=$(".banner_y .nav_right .imgBox img").width();
    //“left” 是自定义的一个动画 我们点击右边 图往左边走 所以乘-1
    $(".banner_y .nav_right .imgBox").css("left",imgWidth*silderIndex*(-1)+"px");
    $(".banner_y .nav_right .silder .l_r span").click(function(){
        //判断左右
        if($(this).index()==0){
            silderIndex--;
        }
        else if($(this).index()==1){
            //向右
            silderIndex++;
        }
        changeImg();
    });

    function changeImg(){
        //首先  封装一个图片切换移动的方法
        //找到装图片的盒子 给它定义一个自定义的方法
        $(".banner_y .nav_right .imgBox").animate({
            "left":imgWidth*silderIndex*(-1)+"px"
        },200,function(){
            //处于最后一张图片时
            if(silderIndex>=$(".banner_y .nav_right .imgBox img").length-1){
                silderIndex=1;
            }
            else if(silderIndex<=0){
                //我要切换到真的第四张图  所以要减2
                silderIndex=$(".banner_y .nav_right .imgBox img").length-2;
            }
            $(".banner_y .nav_right .imgBox").css("left",imgWidth*silderIndex*(-1)+"px");
            $(".banner_y .nav_right .dian li").eq(silderIndex-1).addClass("active").siblings().removeClass("active");
        });
    }
})  